<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <hello></hello>
            <school></school>
            <hr>
        </div>
        
        <div id="root2">
            <hello></hello>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false
            const hello = Vue.extend({
                template:`
                    <h2>hello</h2>
                `
            })
            //创建组件
            const school = Vue.extend(
                {
                    template:`
                        <div>
                            <h3>{{schoolName}}</h3>    
                            <h3>{{address}}</h3>
                            <button @click="showInfo">弹窗</button>
                            <h4>{{n}}</h4>  
                            <button @click="n++">n++</button>
                        </div>
                    `,
                    data(){
                        return {schoolName:'尚硅谷',address:'北京',n:1}
                    },
                    methods:{
                        showInfo(){
                            alert(this.schoolName)
                        }
                    }
                }
            )
            const student =Vue.extend({
                data(){
                    return {studentName:'赵云',age:18}
                },
                template:`
                        <div>
                            <h3>{{studentName}}</h3>    
                            <h3>{{age}}</h3>    
                        </div>
                    `,
            })
            //全局注册
            Vue.component('hello',hello)
            new Vue({
                el:'#root' ,
                data:{
                    msg:'msg',
                },
                //局部注册
                components:{
                    'school':school
                },

            })

            new Vue({
                el:'#root2' ,
            })

        </script>
    </body>
</html> 